<template>
  <!-- 河道图 -->
  <div>
    <div :id="chartId" class="chart"></div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import Ecolors from '@/utils/chartColors'
import {resize, spaceTxt, toolboxFullScreen} from '@/utils/utils'
export default {
  mixins: [resize],
  props: {
    chartId: {
      type: String
    },
    chartData: {
    },
    caty:{
      type:Array
    }
  },
  data() {
    return {
      chart: null,
      colors: [],
      seriesData: [],
    }
  },
  computed: {
    ...mapState(['curChartConfig'])
  },
  watch: {
    chartData() {
      if (Object.keys(this.chartData).length <= 0) {
        if (this.chart) this.chart.clear()
      } else {
        this.init()
      }
    }
  },
  mounted() {
    this.chart = this.$echarts.init(document.getElementById(this.chartId))
    this.init()
  },
  methods: {
    init() {
      let option = {
        tooltip:{
          trigger:'axis',
          axisPointer:{
            type:'line',
            lineStyle:{
              color:'rgba(0,0,0,0.2)',
              width:1,
              type:'solid'
            }
          }
        },
        legend:{
          show:true,
          data:this.caty
        },
        singleAxis:{
          top:50,
          bottom:50,
          axisTick:{},
          axisLabel:{},
          type:'time',
          axisPointer:{
            animation:true,
            label:{
              show:true
            }
          },
          splitLine:{
            show:true,
            lineStyle:{
              type:'dashed',
              opacity:0.2
            }
          }
        },
        series: [
          {
            type: 'themeRiver',
            data: this.chartData,
            label: {
              show: true
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 20,
                shadowColor: 'rgba(0, 0, 0, .5)'
              }
            }
          }
        ]
      }
      this.chart.clear()
      this.chart.setOption(option, true)

      this.$emit('chartDom', this.chart)

      // 后台报告下载
      this.chart.on('finished', () => {
        this.getEchartImg(this.chart.getDataURL())
      })
    },
    getEchartImg(base) {
      window.echartImg = base
    }
  },

  destroyed() {
    this.chart.dispose()
    this.chart = null
  }
}
</script>

<style lang="scss" scoped>
.chart {
  // height: 800px;
  // background-color: #fff;
}
</style>